<script>
import {Delete} from "@element-plus/icons-vue";
import axios from "axios";
import {getBaseUrl} from "@/js/common.js";

export default {
  name: "MyBinItem",
  computed: {
    Delete() {
      return Delete
    }
  },
  methods: {
    deleteBin(){
      this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get(getBaseUrl('blogHandle') + `/blog/delete?id=${this.blog.id}`, {headers: {massToken: sessionStorage.getItem('massToken')}}).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$emit('getDataList')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  props: {
    blog: {
      type: Object,
      default: () => {}
    },
  }
}
</script>

<template>
  <div>
    <el-card style="width: 300px;height: 300px" shadow="hover">
      <template #header>
        <div style="display: flex;justify-content: flex-end;align-items: center;height: 10px">
          <el-button size="small" type="success" round>恢复</el-button>
          <el-button size="small" type="danger" @click="deleteBin" round>彻底删除</el-button>
        </div>
      </template>
      <el-image :src="blog.cover" style="height: 150px" />
      <template #footer>{{blog.title}}</template>
    </el-card>
  </div>
</template>

<style scoped>
</style>
